<!--
*@contractSigning 合约签订
*@author lijiaqi
*@date 2023/10/17 16:47
-->
<template>
  <div class="pageBox">
    <!--    头部-->
    <x-header :left-options="{backText: ''}">合同签约</x-header>
    <!--    内容部分-->
    <div class="content_box">
      <!--   模块   -->
      <div class="item_box">
        <!--小模块-->
        <div class="item_box_one" v-for="(item,index) in dataList" :key="index">
          <div class="one_box" v-for="(i,index) in item.conList" :key="index">
            <div class="itemLine_box">
              <p>{{ i.name }}</p>
              <p>{{ i.value }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="item_box">
        <!--小模块2-->
        <div class="">
          <!--          <div class="itemLine_box">-->
          <popup-picker title="收款账户" :data="list1" v-model="value1" @on-show="onShow" @on-hide="onHide" @on-change="onChange" placeholder="请选择"></popup-picker>
          <popup-picker title="还款账户" :data="list2" v-model="value2" @on-show="onShow" @on-hide="onHide" @on-change="onChange" placeholder="请选择"></popup-picker>
          <popup-picker title="利率执行方式" :data="list3" v-model="value3" @on-show="onShow" @on-hide="onHide" @on-change="onChange" placeholder="请选择"></popup-picker>
          <popup-picker title="利率调整方式" :data="list4" v-model="value4" @on-show="onShow" @on-hide="onHide" @on-change="onChange" placeholder="请选择"></popup-picker>
          <!--          </div>-->
        </div>
      </div>
      <!--    按钮    -->
      <div class="button_box">
        <div class="but_item" @click="toPay()">
          <p>确定</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {PopupPicker} from 'vux'

export default {
  name: "contractSigning",
  props: {},
  components: {PopupPicker},
  data() {
    return {
      dataList: [],
      list1: [['3453 2636 2372 2712', '5432 2336 2382 2742']],
      list2: [['6225 2636 2372 2712', '6225 2336 2382 2742', '2345 2336 2382 2748']],
      list3: [['基准贷款利率', '浮动贷款利率', '固定贷款利率', '混合利率', '住房公积金贷款利率']],
      list4: [['每年年初', '满年度调整', '双方约定']],
      value1: [],
      value2: [],
      value3: [],
      value4: [],
    }
  },
  computed: {},
  watch: {},
  created() {
    this.dataList = [
      {
        title: '1',
        conList: [
          {
            name: '产品名称',
            value: '个商e贷'
          }, {
            name: '合同号',
            value: '00001'
          }, {
            name: '担保方式',
            value: '质押'
          }, {
            name: '签约金额',
            value: '10,000.00 元'
          }, {
            name: '签约日期',
            value: '2021-10-18'
          }, {
            name: '合同到期日',
            value: '2023-10-18'
          }, {
            name: '年利率',
            value: '4.6%'
          }, {
            name: '还款方式',
            value: '等额本息'
          }
        ]
      },
    ]
  },
  mounted() {
  },
  methods: {
    onChange(val) {
      console.log('val change', val)
    },
    onShow() {
      console.log('on show')
    },
    onHide(type) {
      console.log('on hide', type)
    },
    //去支付
    toPay() {
      this.$router.push({
        path: "/refinance/renewalComfirmation",
        query: {
          type: 'success'
        }
      });
    }
  }
}
</script>

<style lang="less" scoped>
.pageBox {
  min-height: 100vh;
  //中间内容部分
  .content_box {
    width: 100%;
    overflow: hidden;
    margin-top: 16px;

    .item_box {
      margin-bottom: 10px;
      height: 100%;
      //width: 100%;
      padding: 0 10px;
      background-color: #FFFFFF;

      .item_box_one {
        border-bottom: 1px solid #E5E6EB;
      }

      .item_box_one:last-child {
        border-bottom: 0;
      }

      .one_box {
        padding: 12px 2px;

        .itemLine_box {
          display: flex;
          align-items: center;
          justify-content: space-between;

          p:first-child {
            margin-right: 15px;
          }
        }
      }
    }

    //按钮部分
    .button_box {
      width: 100%;
      margin: 20px 0;

      .but_item {
        margin: 0 10px;
        padding: 10px 0px;
        //width: 90%;
        //margin: 0 auto;
        background-color: #ff4a32;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;

        p {
          color: white;
          font-size: 16px;
        }
      }
    }
  }

  /deep/ .weui-cell {
    margin: 0;
    padding: 10px 0;
    min-height: unset;
  }

  /deep/ .weui-cells:last-child:after {
    border-bottom: 0;
  }

  /deep/ .weui-cell:before {
    border: 0;
  }

  /deep/ .weui-label {
    font-size: 14px;
    font-weight: 500;
  }
}
</style>
